<template lang="pug">
div(class="large-dose-menu")
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h3")
            div(class="flex-column-item flex-center-center")
              div(class="flex-row")
                div(class="flex-row-item flex-7 flex-center-center")
                  span ---大剂量菜单---
                div(class="flex-row-item right")
                  span {{activeId + 1}}
            div(class="flex-column-item flex-3")
              div(class="flex-row")
                div(class="flex-row-item flex-7",style="height:100%")
                  div(class="flex-column")
                    div(class="flex-column-item flex-center",v-for="(menu,index) in currentPageMenus")
                      span(class="iconfont",:style="{'visibility': index == currentMenuIndex % 3 ? 'visible' : 'hidden'}") &#xe62c;
                      span {{menu.name}}
                    div(:class="'flex-'+ (3 - currentPageMenus.length)")
                div(class="flex-row-item",style="height:100%")
                  control-line(:total="menus.length",:current="activeId",style="float:right") 
</template>

<script>
import MenuList from '@/mixins/MenuList'

export default {
  mixins:[MenuList],
  data() {
    return {
      page: { maxResultCount: 3 },
      menuIndex: 0
    };
  },
  computed: {
    menus() {
      var menus = [{ name: "手动大剂量", id: 1, to: "/large-dose/common" }];
      if (window.dose.menus.fb)
        menus.push({ name: "方波大剂量", id: 2, to: "/react-ware/index" });
      menus.push({ name: "三餐量预设", id: 0, to: "/large-dose/prev-setting" });
      menus.push({ name: "大剂量回顾", id: 5, to: "/large-dose/history" });

      if (window.dose.menus.xd) menus.push({ name: "大剂量向导", id: 4 });

      return menus;
    },
    currentPageMenus() {
      const start = this.skipCount;
      const end = this.skipCount + this.page.maxResultCount;
      return this.menus.slice(start, end);
    }
  },
  methods: {
    up() {
      this.activeId --;
    },
    down() {
      this.activeId ++;
    },

    back() {
      this.$router.push("/menu");
    },
    yes() {
      this.$router.push(this.currentMenu.to);
    }
  },
  mounted() {
    /// 这个activeId作为在menus中的索引

    const id = parseInt(this.$route.query.index) || 0;
    const vm = this;

    this.menus.forEach((menu, index) => {
      if (menu.id == id) vm.menuIndex = index;
    });

  }
};
</script>

<style lang="less">
</style>
